<template>
  <div>
    <el-dialog
      v-model="dialogVisible"
      title="录像"
      :before-close="handleClose"
      width="1064px"
      @opened="handleOpened"
    >
      <div class="replay" ref="replayRef"></div>
      <template #footer>
        <span>
          <el-button @click="handleClose">退出</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from "vue";
import rrwebPlayer, { RRwebPlayerOptions } from "rrweb-player";
import "rrweb-player/dist/style.css";
import { eventWithTime } from "rrweb/typings/types";

export default defineComponent({
  name: "RrWebPlay",
  setup() {
    const state = reactive({
      replayer: {} as RRwebPlayerOptions,
      dialogVisible: false,
      replayRef: {} as HTMLElement,
      event: [] as eventWithTime[],
      player: {} as rrwebPlayer,
    });

    // 播放录制
    const playRecord = (event: eventWithTime[]) => {
      state.event = event;
      state.dialogVisible = true;
    };

    // 对话框关闭事件
    const handleClose = () => {
      state.dialogVisible = false;
      state.player.getReplayer().destroy();
      state.replayRef.innerHTML = "";
    };

    // 对话框打开动画结束时的回调
    const handleOpened = () => {
      state.player = new rrwebPlayer({
        target: state.replayRef,
        props: {
          events: state.event, // 包含回放所需的数据
          width: 1024, // 播放器宽度
          height: 576, // 播放器高度
          autoPlay: false, // 是否自动播放
          speedOption: [1, 2, 5, 10], // 倍速播放可选值
          showController: true, // 是否显示播放器控制UI
        },
      });
    };

    return {
      ...toRefs(state),
      handleClose,
      playRecord,
      handleOpened,
    };
  },
});
</script>

<style lang="scss" scoped>
.replay {
  :deep(.rr-player) {
    box-shadow: 0 0 2px;
  }

  :deep(.svelte-19ke1iv:nth-child(7)) {
    display: none;
  }
}

:deep(.el-dialog) {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-height: calc(100% - 30px);
  max-width: calc(100% - 30px);
}
</style>